@import (reference) 'config';

w-carousel {
  display: block;
  height: 140px;
  margin: 60px 0;
}

.graph {
  margin-left: 10px;
}

.slider {
  overflow: visible;
  width: 100%;
  height: 100%;
  position: relative;
}

.slider-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}


.slide {
  width: 22%;
  min-width: 290px;
  overflow: visible;
  cursor: pointer;

  &_css-anim {
    border-radius: @border-radius;
    background: @color-white;
    padding: 30px;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 1rem 2.5rem rgba(58, 78, 136, 0.1), 0 0.5rem 1rem -0.75rem rgba(58, 78, 136, 0.1) !important;
      transform: translate3d(0, -3px, 0);
    }
  }

  .graph {
    width: 80px;
    height: 46px;
    position: relative;
  }

  .red {
    color: @color-error-500;
  }

  .blue {
    color: @color-submit-400;
  }

  h2 {
    font-weight: normal;
    margin: 0 0 7px;
  }
}

@media screen and (max-width: 1439px) {
  .slide {
    width: 31%;
  }
}

@media screen and (max-width: 999px) {
  .slide {
    width: 48%;
  }
}

@media screen and (max-width: 619px) {
  .slide {
    width: 100%;
  }
}